<template>
    <div style="overflow: hidden;">
        <van-nav-bar title="订单支付" left-text="" left-arrow @click="onClickLeft" style="width:375px;" />
        <div class="Handelorder">
            <div class="orders">
                <h5>服务名称</h5>
                <span class="video">视频问诊</span><span class="prices">￥139.00</span>
            </div>
            <div class="orderss">
                <van-cell title="优惠券" is-link @click="showPopup" />
                <van-popup v-model:show="showBottom" position="bottom" round :style="{ height: '70%' }">
                    <div class="Handlepop">
                        <div style="width: 375px;height: 50px;border-bottom: 1px solid #ccc;">
                            <h2 style="text-align: center;">请选择优惠券</h2>
                            <span style="color: #c1c1c1;font-size: 18px;position: absolute;right: 25px;top: 15px;"
                                @click="HandleNO">x</span>
                        </div>
                        <div class="Handlepops">
                            <img src="../../assets/quans.jpg" alt="">
                            <p>暂无可用优惠券</p>
                        </div>
                    </div>
                </van-popup>
                <span class="videos">共需支付</span><span class="pricess">￥139.00</span>
            </div>
            <div class="orderssss">
                <h4 style="position: absolute;top: -30px;margin-left: 15px;">选择支付方式</h4>
                <div>
                    <img src="../../assets//支付宝.png" alt=""
                        style="width: 50px;height: 40px;position: absolute;top: 20px;left: 15px;">
                    <span style="position: absolute;top: 20px;margin-left: 70px;">支付宝支付</span>
                    <span
                        style="position: absolute;top: 40px;margin-left: 70px;font-size: 13px;">推荐安装支付宝6.3.30以上版本的用户使用</span>
                    <div style="position: absolute;right: 25px;top: 25px;">
                        <van-radio-group value="{{ radio }}" bind:change="onChange">
                            <van-radio name="选中" @change="onRadio"></van-radio>
                        </van-radio-group>
                    </div>
                </div>

            </div>
            <div style="width: 414px;height: 60px;background-color: white;position: fixed;left:0px;bottom: 2px;">
                <button
                    style="width: 331.2px;height: 50px;background-color:#ff6134;border: none;
        outline: none;color: white;position: fixed;left: 40px;border-bottom: 0px;font-size: 18px;font-weight: 900;bottom: 2px;"
                    @click="HandleOrder">去支付</button>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import axios from 'axios';
import http from '@/http/axios';
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';
const router = useRouter()
const checked = ref(true)
const orderIds = Date.now().toString()
const price = ref('139.00')

const onRadio = (e: any) => {
    checked.value = e.detail
}
const onClickLeft = () => {
    router.go(-1)
}
const HandleOrder = async () => {
    showCenter.value = true;
    console.log(price.value, orderIds);
    await http.get("/addres/pay", { params: { price: price.value, id: orderIds } }).then(res => {
        window.open(res.data.result);
        console.log(res.data.result);
           showToast('支付成功');
              router.push('/consultation')
    }) .catch(err => {
        console.log(err);
    })
}
const HandleNO = () => {
    showBottom.value = false;
}
const showBottom = ref<any>(false)
const showPopup = () => {
    showBottom.value = true;
};
const showCenter = ref<any>(false)
</script>

<style lang="scss" scoped>
.Handelorder {
    width: 414px;
    height: 600px;
    background: linear-gradient(to bottom, #cfe4fb, #f1f5f8);
    position: relative;

    .orders {
        position: absolute;
        top: 15px;
        left: 7px;
        width: 393.3px;
        height: 70px;
        background-color: #fff;
    }

    .orderss {
        position: absolute;
        top: 100px;
        left: 7px;
        width: 95%;
        height: 75px;
        background-color: #fff;
    }

    .orderssss {
        position: absolute;
        top: 210px;
        left: 7px;
        width: 95%;
        height: 75px;
        background-color: #fff;
    }

    .video {
        position: absolute;
        left: 15px;
        font-size: 18px;
        line-height: 89px;
        color: #323232;
    }

    .videos {
        position: absolute;
        left: 15px;
        font-size: 18px;
        line-height: 30px;
        color: #323232;
    }

    .prices {
        position: absolute;
        right: 15px;
        font-size: 18px;
        color: red;
        line-height: 89px;
    }

    .pricess {
        position: absolute;
        right: 15px;
        font-size: 18px;
        color: red;
        line-height: 30px;
    }

    h5 {
        position: absolute;
        font-size: 14px;
        top: 10px;
        left: 15px;
        color: #999999;
    }
}

:deep(.van-icon-arrow-left:before) {
    color: #000;
}

:deep(.van-icon-success:before) {
    width: 20px;
    height: 20px;
    color: white;
    background-color: #39d167;
    border-radius: 50%;
}

.Handlepop {
    width: 375px;
    height: 200px;

}

.Handlepops {
    width: 375px;
    height: 450px;
    background-color: #f1f1f1;

    img {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    p {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>